<template>
  <div class="wrapper">
    <div class="d2">
      <div class="d3">
        <b>系统登录</b>
      </div>
      <el-form class="eform" :model="loginForm" :rules="rules" ref="userForm">
        <el-form-item class="efi1" label="用户名:" prop="username">
          <el-input
            size="large"
            style="margin: 10px 0"
            placeholder="请输入用户名"
            prefix-icon="User"
            clearable
            v-model="loginForm.username"
          ></el-input>
        </el-form-item>
        <el-form-item class="efi2" label="密&nbsp&nbsp&nbsp码:" prop="password">
          <el-input
            size="large"
            style="margin: 10px 0"
            placeholder="请输入密码"
            prefix-icon="Lock"
            show-password
            v-model="loginForm.password"
          ></el-input>
        </el-form-item>
        <el-form-item class="bu">
          <!-- <el-button
            style="margin-right: 20px"
            type="warning"
            autocomplete="off"
            plain
            @click="$router.push('/register')"
            >注册</el-button
          > -->
          <el-button
            class="bu1"
            type="primary"
            autocomplete="off"
            @click.prevent="login"
            @keyup.enter.prevent="enterdown"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  computed,
  getCurrentInstance,
  onMounted,
  onUnmounted,
  reactive,
  toRaw,
} from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import { ElNotification } from "element-plus";
import { get } from "underscore";

export default {
  // name: "Login",
  setup() {
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    const store = useStore();
    const loginForm = reactive({
      username: "lqd",
      password: "123456",
    });
    // 表单验证条件
    const rules = reactive({
      username: [
        {
          required: true,
          message: "请填写用户名",
          trigger: "blur",
        },
        {
          min: 2,
          max: 20,
          message: "用户名长度在2-20个字符之间",
          trigger: "blur",
        },
      ],
      password: [
        {
          required: true,
          message: "请填写密码",
          trigger: "blur",
        },
        {
          min: 6,
          max: 20,
          message: "密码长度在6-20个字符之间",
          trigger: "blur",
        },
      ],
    });
    // 登录
    const login = () => {
      // 提交验证表单
      proxy.$refs.userForm.validate(async (valid) => {
        if (valid) {
          let password = loginForm.password;
          let hashpassword = await proxy.$md5(password);
          console.log(hashpassword);
          const res = await proxy.$api.user.userLogin({
            username: loginForm.username,
            password: hashpassword,
          });
          console.log(res);

          if (res) {
            store.commit("setMenu", res.data.menu);
            // 登录时实现动态路由，还需要页面刷新后也实现动态路由，其实现在main.js中
            store.commit("addMenu", router);
            store.commit("setToken", res.data.token);
            localStorage.setItem("username", loginForm.username);
            //个人页面信息获取
            localStorage.setItem("userId", res.data.userId);
            router.push({
              name: "home",
            });
            ElMessage.success(res.data.message);
            // 如果个人信息完善就不跳出提示
            if (!res.data.personalInfo) {
              setTimeout(() => {
                ElNotification({
                  title: "系统消息",
                  message: "请点击头像完善个人信息",
                  duration: 2500,
                  icon: "Setting",
                });
              }, 1000);
            }
          }
        } else {
          ElMessage.error("用户名密码错误");
        }
      });
    };
    // 回车触发登录事件
    function enterdown(e) {
      // 判断keycode是否为enter的keycode
      if (e.keyCode == 13) {
        login();
      }
    }
    // 页面加载后执行监听键盘事件
    onMounted(() => {
      window.addEventListener("keydown", enterdown);
    });
    // 页面卸载后取消监听键盘事件
    onUnmounted(() => {
      window.removeEventListener("keydown", enterdown);
    });
    return {
      loginForm,
      login,
      rules,
      enterdown,
    };
  },
};
</script>

<style scoped>
.wrapper {
  height: 100vh;
  background-image: url("../assets/images/back.png");
  overflow: hidden;
}
.d2 {
  margin: 200px auto;
  background-color: #fff;
  width: 380px;
  height: 350px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 24px #92c3ff;
}
.d3 {
  margin: 20px 0;
  text-align: center;
  font-size: 20px;
  color: #282525;
  font-weight: bold;
}
.bu {
  margin-top: 30px;
  justify-content: center;
}

.eform {
  margin-top: 40px;
}
/* .eform .el-input {
  --el-input-width: 250px;
} */
/* :deep(.el-form-item__label) {
  align-items: center;
  padding: 50px;
} */
:deep(.el-form-item__content) {
  justify-content: center;
}
.efi1,
.efi2 {
  display: flex;
  align-items: center;
  /* margin: 10px; */
}
</style>
